<template>
    <div>
        <p :style="[ styles ]">{{text.t}}</p>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: Object,
            required: true
        },
        fontNum: {
            type: [Number, String],
            default: 12
        }
    },
    computed: {
        styles(){
            let style = {}, text = this.text
            style.fontSize = `${this.fontNum}px`
            text.d && (
                style.color = text.c,
                style.fontSize = text.f+'px',
                text.i && (style.fontStyle = 'italic'),
                text.b && (style.fontWeight = 'bold'),
                text.u && (style.textDecoration = 'underline')
            )
            return style
        },
    }
}
</script>

<style lang="scss" scoped>
    p{text-align: center;width: 100%; margin: 0 auto;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;word-break: break-all;}
</style>

